<template>
	<el-tab-pane v-for="item in classList" :key="item.id" :label="item.name">
		<el-table
			ref="multipleTable"
			:data="item.exps"
			tooltip-effect="dark"
			style="width: 100%; margin-top: -40px"
			@selection-change="handleSelectionChange(scope)"
			@select="handleSelect(scope)"
		>
			<!-- <el-table-column
						type="selection"
						width="100"
						@select="handleSelect(selection, row)"
					>
					</el-table-column> -->
			<el-table-column label="班级" width="520" style="font-size: 20px">
				<template v-slot="scope"
					><span @click="handleClick(scope.row)">
						{{ scope.row.name }}
					</span></template
				>

				<!-- <router-view></router-view> -->
			</el-table-column>
		</el-table>

		<div style="margin-top: 20px">
			<!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])"
				>全选</el-button
			>
			<el-button type="primary" @click="publish(tableData)"
				>发布</el-button
			> -->
		</div>
		<!-- </el-checkbox> -->
	</el-tab-pane>
</template>

<script setup lang="ts">
//@ts-nocheck
import { getClass } from '../../api/request'
import { useRouter } from 'vue-router'
const router = useRouter()
const multipleSelection = ref([])
const classList = ref([
	{
		cid: 1,
		name: '液体粘滞系数的测定',
		exps: [],
	},
	{
		cid: 1,
		name: '密立根液体表面张力系数的测定油滴实验',
		exps: [],
	},
	{
		cid: 1,
		name: '用牛顿环仪测量透镜的曲率半径',
		exps: [],
	},
	{
		cid: 1,
		name: '迈克尔逊干涉仪的调节与使用',
		exps: [],
	},
])
const result = ref([
	{
		major: '环境科学',
		className: '2',
	},
	{
		major: '环境科学',
		className: '3',
	},
])
// 跳转到学生
const handleClick = (row) => {
	router.push({ path: '/exp-manage/studentList', query: { cid: row.cid } })
}
onMounted(() => {
	console.log(localStorage.getItem('jwtToken'), 'session是')
	const jwtToken = localStorage.getItem('jwtToken')
	getClass(jwtToken).then((res) => {
		// console.log(res, '返回的数据')
		result.value = res.data.data
		// console.log(res.data.data, '据')
		// console.log(result.value, '返回的数据')
		// 处理result的数据
		result.value = result.value.map((item) => ({
			cid: item.cid,
			name: `${item.major}${item.classNum}班`,
			state: 0,
		}))
		console.log('处理后的result', result.value)
		// 处理classList的数据
		classList.value = classList.value.map((classInfo) => ({
			id: classInfo.id,
			name: classInfo.name,
			exps: result.value,
			state: '0',
		}))
	})
})
// 点击勾选
const handleSelect = (scope) => {
	console.log(scope)
}
const handleSelectionChange = (scope) => {
	console.log(multipleSelection.value)
	console.log(scope)
}
// 发布实验
const publish = (row) => {
	// console.log(row)
	// postEx(row).then((res) => {
	// 	console.log(res)
	// })
	ElMessage.success('发布成功')
}
// 选框状态
const checked = ref(true)
</script>

<style lang="scss" scoped>
</style>